<script setup lang="ts">
import { onMounted } from 'vue'
import { useMovieStore } from '../stores/movie'

// 电影页面 - 专门展示电影内容
const movieStore = useMovieStore()

onMounted(() => {
  movieStore.reset()
  movieStore.fetchHotMovies()
})
</script>

<template>
  <div class="movies-container">
    <div class="page-header">
      <h1 class="page-title">热门电影</h1>
      <p class="page-subtitle">发现最新最热的电影资源</p>
    </div>

    <!-- 错误提示 -->
    <el-alert v-if="movieStore.error" :title="movieStore.error" type="error" :closable="false" class="error-alert" />

    <!-- 电影列表 -->
    <div class="video-grid" v-if="movieStore.movies.length > 0">
      <el-card v-for="movie in movieStore.movies" :key="movie.id" shadow="hover" class="video-card"
        @click="$router.push(`/video/${movie.id}`)">
        <div class="video-cover">
          <el-image :src="movie.images && movie.images.medium ? 'https://images.weserv.nl/?url=' + movie.images.medium : ''" 
            class="cover-image" fit="cover" :alt="movie.title">
            <template #placeholder>
              <el-skeleton-item variant="image" class="image-skeleton" />
            </template>
            <template #error>
              <div class="image-error">加载失败</div>
            </template>
          </el-image>
          <div class="video-rate">{{ (movie.rating && (movie.rating * 1).toFixed(1)) || 'N/A' }}</div>
        </div>
        <div class="video-info">
          <h3 class="video-title" :title="movie.title">{{ movie.title }}</h3>
          <p class="video-year">{{ movie.year }}年</p>
          <div class="video-meta">
            <span class="video-genres">{{ (movie.genres && movie.genres.join(' / ')) || '未知' }}</span>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 加载状态 -->
    <div v-if="movieStore.loading" class="loading-skeleton">
      <el-skeleton :rows="3" animated />
    </div>

    <!-- 空状态 -->
    <div v-if="movieStore.isEmpty && !movieStore.loading" class="empty-state">
      <el-empty description="暂无热门电影" />
    </div>

    <!-- 加载更多 -->
    <div v-if="movieStore.hasMore && !movieStore.loading" class="load-more">
      <el-button type="primary" @click="movieStore.loadMore" :loading="movieStore.loading">
        加载更多
      </el-button>
    </div>
  </div>
</template>

<style scoped>
.movies-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.page-header {
  text-align: center;
  margin-bottom: 40px;
}

.page-title {
  font-size: 32px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 10px;
}

.page-subtitle {
  font-size: 16px;
  color: #909399;
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 40px;
}

.video-card {
  cursor: pointer;
  transition: transform 0.3s ease;
  border-radius: 8px;
  overflow: hidden;
}

.video-card:hover {
  transform: translateY(-5px);
}

.video-cover {
  position: relative;
  aspect-ratio: 2/3;
}

.cover-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-skeleton {
  width: 100%;
  height: 100%;
}

.image-error {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f7fa;
  color: #909399;
  font-size: 14px;
}

.video-rate {
  position: absolute;
  top: 8px;
  right: 8px;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
}

.video-info {
  padding: 12px;
}

.video-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-year {
  font-size: 14px;
  color: #909399;
  margin-bottom: 4px;
}

.video-genres {
  font-size: 12px;
  color: #606266;
}

.loading-skeleton {
  text-align: center;
  padding: 40px;
}

.empty-state {
  text-align: center;
  padding: 60px 0;
}

.load-more {
  text-align: center;
  margin: 40px 0;
}

.error-alert {
  margin-bottom: 20px;
}

@media (max-width: 768px) {
  .movies-container {
    padding: 10px;
  }
  
  .video-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
  }
  
  .page-title {
    font-size: 24px;
  }
}
</style>